<script lang="ts" setup>
import type {ReplyInfo} from "../../network/types/Reply.ts";
import {toRefs} from "vue";
import {useAccountStore} from "../../store/AccountStore.ts";
import {ElMessage} from "element-plus";

interface Props {
  reply: ReplyInfo,
}

const props = defineProps<Props>()
const {reply} = toRefs(props)

const readApi = () => useAccountStore().getNgaApi().read

const agreeType = (count: number): "primary" | "success" | "info" | "warning" | "danger" => {
  if (count > 30) return "danger"
  if (count > 20) return "warning"
  if (count > 10) return "success"
  if (count > 5) return "primary"
  return "info"
}

const recommend = (value: 1 | -1, reply: ReplyInfo) => {
  const tid = reply.topicId
  const pid = reply.replyId

  readApi().recommend(value, tid, pid).then(res => {
    console.log(res)
    const [message, point] = res
    if (point === 1) {
      ElMessage.success(message)
    } else {
      ElMessage.warning(message)
    }
    reply.agreeCount += Number(point)
  }).catch(r => {
    console.error(r)
    if (r.error) {
      ElMessage.error(r.error[0])
    }
  })
}

</script>

<template>
  <el-tag v-if="reply.agreeCount!==undefined" :type="agreeType(reply.agreeCount)">
    <span class="clickable" @click="recommend(1,reply)">赞</span>
    <span class="agree-count">{{ reply.agreeCount }}</span>
    <span class="clickable" @click="recommend(-1,reply)">踩</span>
  </el-tag>
</template>

<style scoped>

</style>